<template>
  <div>
    <div class="flex jc-sb bg-fff pr-20">
      <HeaderTitle :textObj="textObj"></HeaderTitle>
      <el-link @click="handleAdd" type="primary">新增</el-link>
    </div>

    <el-table :data="tableData" stripe style="width: 100%" border>
      <el-table-column align="center" prop="id" label="编号" width="180" />
      <el-table-column
        align="center"
        prop="cTime"
        label="创造时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column
        align="center"
        prop="uTime"
        label="更新时间"
        width="180"
        :formatter="formatDate"
      />
      <el-table-column align="center" prop="name" label="名字" width="180" />
      <el-table-column align="center" prop="unit" label="单位" />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="120"
      >
        <template #default="scope">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="handleEdit(scope.row, scope.$index)"
          />
          <el-button
            type="danger"
            circle
            :icon="Delete"
            @click="handleDelete(scope.row, scope.$index)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹窗 -->
    <el-dialog
      draggable
      v-model="dialogVisible"
      title="编辑信息"
      width="30%"
      align-center
    >
      <el-form :model="form" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="form.name" placeholder="请输入名字" />
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog
      draggable
      v-model="addShow"
      title="新增测量"
      width="30%"
      align-center
    >
      <el-form :model="form" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="form.name" placeholder="请输入名字" />
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addShow = false">取消</el-button>
          <el-button type="primary" @click="saveAdd">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  $measurementList,
  $measurementDel,
  $measurementEdit,
  $measurementAdd,
} from "../../api/index";
import { ref, onMounted } from "vue";
import HeaderTitle from "../../components/HeaderTitle.vue";
import { formatDate } from "../../utils/utils";
import { Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

let textObj = {
  title: "自定义类型 ",
  name: "测量类型",
  dsc: " 展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。",
};

const tableData = ref([]);
const dialogVisible = ref(false);
const addShow = ref(false);
const form = ref({
  name: "",
  unit: "",
  id: null,
  index: null,
});

const getList = async () => {
  try {
    let res = await $measurementList();
    tableData.value = res.data;
  } catch (error) {
    console.error("获取列表数据失败:", error);
    ElMessage({
      type: "error",
      message: "获取列表数据失败，请稍后重试",
    });
  }
};

const handleAdd = async () => {
  form.value = {
    name: "",
    unit: "",
  };
  addShow.value = true;
};
const saveAdd = () => {
  // 更新表格数据
  if (form.value.name && form.value.unit) {
    $measurementAdd({
      id: form.value.id,
      name: form.value.name,
      unit: form.value.unit,
    }).then((res) => {
      ElMessage({
        type: "success",
        message: "新增成功",
      });
      tableData.value.unshift(res.data);
    });
    addShow.value = false;
  } else {
    ElMessage({
      type: "error",
      message: "请输入完整信息",
    });
  }
  form.value = {
    name: "",
    unit: "",
  };
};
const handleEdit = (row, index) => {
  // 填充表单数据
  form.value = {
    name: row.name,
    unit: row.unit,
    id: row.id,
    index: index,
  };
  dialogVisible.value = true;
};

const saveEdit = () => {
  // 更新表格数据
  if (form.value.id !==null && form.value.index !==null) {
    $measurementEdit({
      id: form.value.id,
      name: form.value.name,
      unit: form.value.unit,
    }).then((res) => {
      tableData.value[form.value.index].name = form.value.name;
      tableData.value[form.value.index].unit = form.value.unit;
      ElMessage({
        type: "success",
        message: "编辑成功",
      });
    });
    dialogVisible.value = false;
  }
};

const handleDelete = async (row, index) => {
  try {
    await ElMessageBox.confirm("确定要删除这条数据吗?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true,
    });
  let res= await $measurementDel({ id: row.id });
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    // 刷新列表
   getList();
  } catch (error) {
    console.error("删除数据失败:", error);
  }
};

onMounted(() => {
  getList();
});
</script>

<style>
</style>